<template>
    <!-- 居家检测 /密切跟踪-->
    <div class="quan">
        <div class="ju">
            <span>居家检测/密切跟踪</span>
        </div>
        <div class="head">
            <div class="name">
                <span>{{ name }}</span>
                <span>{{ zhen }}</span>
            </div>
            <div class="xia">
                <span class="xia1">身份证号:</span>
                <span>{{ shen }}</span>
            </div>
            <div class="xia">
                <span class="xia1">手机号:</span>
                <span>{{ shou }}</span>
            </div>
            <div class="xia">
                <span class="xia1">居家检测时段:</span>
                <span>{{ shi }}至{{ shi1 }}</span>
            </div>


        </div>
        <div class="zhong">
            <router-link :to="{name:'miqie', query: {id:jie}}">
                <span>体温测试</span>
            </router-link>
            <span class="zhong1">核酸检测登记</span>
        </div>
        <div class="hh">
            <div class="hh1">
                <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">
                    <el-table-column type=index label="序号" align="center" min-width="20%" />
                    <el-table-column prop="samplingDate" label="采样日期" align="center" min-width="30%" />
                    <el-table-column prop="company" label="送检单位" align="center" min-width="30%" />
                    <el-table-column prop="serum" label="是否咽拭子" align="center" min-width="30%" />
                    <el-table-column prop="throatSwabs" label="是否血清" align="center" min-width="30%" />
                    <el-table-column prop="testDate" label="送检日期" align="center" min-width="30%" />
                    <el-table-column prop="result" label="检验结果" align="center" min-width="30%" />

                </el-table>
                <!-- //分页 -->
                <div class="table-footer fen2">
                    <div class="demo-pagination-block">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[15, 20, 25, 30]" :small="small" :disabled="disabled" :background="background"
                            layout="total,  prev, pager, next,sizes, jumper" :total="tableData.length"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </div>

            </div>


            <div>
                <el-button class="xin" type="primary" @click="show">新增一行</el-button>

                <teleport to="body">
                    <!-- to后面的地址还可以是 html  或者其他 div等 -->
                    <!-- 表示将teleport包裹的这个div,移动到html这个结构中 -->
                    <div class="mask" v-if="isShow.showDialog">
                        <div class="dialog1">
                            <h2>新增核酸记录</h2>
                            <div class="tan">
                                <span>采样日期:</span>
                                <el-input style="width: 300px" align="center" v-model="cdata" />
                                <br>
                                <span>送检单位:</span>
                                <el-input style="width: 300px" align="center" v-model="song" />
                                <br>
                                <span>是否咽拭子:</span>
                                <el-input style="width: 300px" align="center" v-model="yan" />
                                <br>
                                <span>是否血清:</span>
                                <el-input style="width: 300px" align="center" v-model="xue" />
                                <br>
                                <span>送检日期:</span>
                                <el-input style="width: 300px" align="center" v-model="jian" />
                                <br>
                                <span>检验结果:</span>
                                <el-input style="width: 300px" align="center" v-model="sjie" />
                                <br>
                                <span>登记日期:</span>
                                <el-input style="width: 300px" align="center" v-model="den" />
                            </div>

                            <el-button class="dialog-btn" @click="hidden" type="primary" round>返回</el-button>
                            <el-button class="dialog-btn" @click="hidden2" type="primary" round>确认</el-button>
                        </div>
                    </div>
                </teleport>
            </div>
            <router-link to="/miqie"><el-button type="info" class="fan" round>返回</el-button></router-link>

        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from '@/views/chen/http'
export default defineComponent({
    name: "miqie2",
    setup() {
        const route = useRoute();
        const jie = route.query.id; //接收跳转参数;
        console.log(jie);
        
        let name=ref("");//跳转名字
        let zhen = ref("");//接收正常异常
        // const tableData = [
        //     {
        //         date: 1,
        //         name: '2020-01-01',
        //         address: '毒液湖医院',
        //         yan:"是",
        //         xue:"否",
        //         song:"2020-11-12",
        //         jie:"阴性"
        //     },
        //     {
        //         date: 2,
        //         name: '2020-01-02',
        //         address: '苏大附属医院',
        //         yan:"是",
        //         xue:"否",
        //         song:"2020-11-12",
        //         jie:"阴性"
        //     },
        //     {
        //         date: 3,
        //         name: '2020-01-03',
        //         address: '苏大附属医院',
        //         yan:"是",
        //         xue:"否",
        //         song:"2020-11-12",
        //         jie:"阴性"
        //     },
        //     {
        //         date: 4,
        //         name: '2020-01-04',
        //         address: '毒液湖医院',
        //         yan:"是",
        //         xue:"否",
        //         song:"2020-11-12",
        //         jie:"阴性"
        //     },
        // ];
        let mydata = reactive({
            shen: "1245690218233",
            shou: "18082223422",
            shi: "2002-10-01 14:00 ",
            shi1: ""
        });
        //模态框
        let isShow = reactive({
            showDialog: false,//模态框
        });
        function show() {
            isShow.showDialog = true; //激活模态框
        };
        function hidden() {
            isShow.showDialog = false; // 返回关闭模态框
        };
        let cdata = ref("");//采样日期
        let song = ref("");//送检单位
        let yan = ref("");//是否咽拭子
        let xue = ref("");//是否血清
        let jian = ref("");//送检日期
        let sjie = ref("");//检验结果
        let den = ref("");//登记日期
        function hidden2() { //进行数据导入

            let b = cdata.value;
            let c = song.value;
            let d = yan.value;
            let e = xue.value;
            let f = jian.value;
            let j = sjie.value;
            let h = den.value;
            if (b && c && d && e && f && j && h) {
                isShow.showDialog = false;
                //添加核酸记录
                axios({
                    method: "post", url: "dailyAgent/AddTest",
                    params: { id: jie, samplingDate: b, company: c, throatSwabs: d, serum: e, testDate: f, result: j, date: h }
                }).then((res) => {
                    alert("添加成功")
                    axios({
                        method: "get", url: "dailyAgent/FindDayTest", params: { id: 14 }
                    }).then((res) => {

                        let a = res.data.data;
                        tableData1.tableData = a
                        // console.log(res);
                    })

                }).catch((err) => {
                    console.log(err);

                })

            }
            else {
                alert("请输入内容")
            }
        };
        //表格内容
        let tableData1 = reactive({
            tableData: [
                {
                },
            ]
        });
        onMounted(async () => {
            //挂载前获取全部参数
            //展示全部数据
            //获取姓名这些的数据
            await axios({
                method: "get", url: "dailyAgent/DayDoShowDetailAndFollowClosely",
                params: { id: jie }
            }).then((res) => {

                let a = res.data.data[0]
                name.value = a.name;
                zhen.value = a.normalOrAbnormal;
                mydata.shou = a.phoneNum;
                mydata.shen = a.phoneNum;
                mydata.shi = a.startDate;
                mydata.shi1 = a.removeDate;
                // console.log(a);
            })
            //获取核酸数据
            axios({
                method: "get", url: "dailyAgent/FindDayTest", params: { id: jie }
            }).then((res) => {

                let a = res.data.data;
                tableData1.tableData = a
                // console.log(a);
            })

        })
        //分页
        let currentPage = ref(1);//当前页数
        let pageSize = ref(10);
        let small = ref(false);
        let background = ref(false);
        let disabled = ref(false);

        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`)

        };
        //跳转
        const handleCurrentChange = (val: number) => {
            console.log(val)

        };
        const noticeList = reactive({
            list: []
        });
        return {
            ...toRefs(tableData1), jie, ...toRefs(mydata), show, hidden, isShow, hidden2,
            cdata, song, yan, xue, jian, sjie, den, zhen,
            currentPage, pageSize, small, background,
            disabled, handleSizeChange,
            handleCurrentChange, ...toRefs(noticeList),name
        }
    }
})


</script>

<style scoped lang="less">
.hh {
    width: 100%;
    height: 800px;
    background-color: rgb(255, 255, 255);
}

.quan {
    width: 100%;
    height: 700px;
}

// 设置表头样式
/deep/ .el-table th {
    background-color: #f9f9f9 !important;
    color: black;
    Font-weight: 400; // 字体粗细

}

.ju {
    padding: 20px 0px 20px 0px;
}

.head {
    background-color: #ffffff;
    width: 100%;
    height: 172px !important;
}

.zhong {
    width: 298px;
    height: 42px;
    margin-top: 20px;
    background-color: #ffffff;
}

.zhong span {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: center;
    margin-top: 10px
}

.zhong1 {
    border-bottom: 2px solid #338ae5;
}

.hh1 {
    padding-top: 50px;
    margin-left: 35px;
    margin-right: 35px;
    position: relative;
}

.name {
    padding: 20px 60px 20px 20px;
    display: flex;
    justify-content: space-between
}

.name span {
    font-size: 30px;
    color: #333333
}

.xia {
    padding-left: 20px;
    margin-top: 3px;
}

.xia1 {
    width: 100px;
    display: inline-block;
    margin-right: 20px;
}

.mask {
    /* 创建遮罩层 */
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.dialog1 {
    text-align: center;
    width: 600px;
    height: 500px;
    background: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    /* top和left这个两个50%表示的是，这个弹框的顶部到页面的顶部，弹框的左侧到页面的左侧 */
    transform: translate(-50%, -50%);

    /* 这个偏移表示的是，偏移这个div框自身宽度和高度的50% */
    span {
        display: inline;
        width: 100px;
        text-align: right;
    }
}

.xin {
    margin-left: 35px;
    margin-top: 60px;
    width: 174px;
    height: 40px;
    font-size: 16px
}

.tan {
    margin: 30px 0px 50px 0px
}

.tan span {
    display: inline-block;
    padding-top: 20px;
    margin-right: 5px
}

.fan {
    margin-left: 35px;
    margin-top: 30px
}

.fen {
    width: 100%;
}

.fen2 {
    position: absolute;
    bottom: -50px;
    right: 20px
}</style>